<template>
    <div class="customers_container">
        <div class="row_items_wrap">
            <CustomerItem :img_src="require('../assets/image/abouts/shangyeyinghan.png')" title="商业银行" content="state-owned bank"/>
            <CustomerItem :img_src="require('../assets/image/abouts/xfjrgs.png')" title="消费金融公司" content="joint-stock bank"/>
            <CustomerItem :img_src="require('../assets/image/abouts/xintuogs.png')" title="信托公司" content="joint-stock bank"/>
        </div>
        <div class="row_items_wrap">
            <CustomerItem :img_src="require('../assets/image/abouts/yhlczgs.png')" title="银行理财子公司" content="financial institution"/>
            <CustomerItem :img_src="require('../assets/image/abouts/shangyeyinghan.png')" title="小贷公司" content="financial institution"/>
            <CustomerItem :img_src="require('../assets/image/abouts/shangyeyinghan.png')" title="金融科技公司" content="financial institution"/>
        </div>
        <div class="row_items_mobile_wrap">
            <CustomerItem :img_src="require('../assets/image/abouts/shangyeyinghan.png')" title="商业银行" content="state-owned bank"/>
            <CustomerItem :img_src="require('../assets/image/abouts/xfjrgs.png')" title="消费金融公司" content="joint-stock bank"/>
        </div>
        <div class="row_items_mobile_wrap">
            <CustomerItem :img_src="require('../assets/image/abouts/xintuogs.png')" title="信托公司" content="joint-stock bank"/>
            <CustomerItem :img_src="require('../assets/image/abouts/yhlczgs.png')" title="银行理财子公司" content="financial institution"/>
        </div>
        <div class="row_items_mobile_wrap">
            <CustomerItem :img_src="require('../assets/image/abouts/shangyeyinghan.png')" title="小贷公司" content="financial institution"/>
            <CustomerItem :img_src="require('../assets/image/abouts/shangyeyinghan.png')" title="金融科技公司" content="financial institution"/>
        </div>
    </div>
</template>

<script>
    import CustomerItem from "./CustomerItem";
    export default {
        components:{
            CustomerItem
        }
    }
</script>

<style lang="scss">

    .customers_container{
        display: flex;
        flex-direction: column;
        background-color: white;
        padding: 1.6rem 200px;

        .row_items_wrap{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex:1;
        }

        .row_items_mobile_wrap{
            display: none;
        }

    }

    /**
移动端样式
 */
    @media screen and (max-width: $mobile_width) {
        .customers_container{
            padding: .6rem 1.2rem;
            .row_items_wrap{
                display: none;
            }

            .row_items_mobile_wrap{
                display: flex;
                flex-direction: row;
                flex:1;
            }

        }
    }

</style>
